<template>
  <div class="home">
    <!-- 头部 layout布局 -->
    <van-row>
      <van-col span="7" class="ceshi">
        <img src="../../assets/img/ceshi.png">
        <span>测一测</span>
      </van-col>
      <!-- 搜索框 -->
      <van-col span="12">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
          input-align="center"
        />
      </van-col>
      <van-col span="5" class="qiandao">
        <img src="../../assets/img/qiandao.png" class="qd">
        <img src="../../assets/img/lingdang.png" class="ld">
      </van-col>
    </van-row>

    <!-- 吸顶-->
    <van-tabs v-model="active">
      <van-tab v-for="item in nameList" :key="item" :title="item"></van-tab>
    </van-tabs>

    <!-- 滚动的外框 -->
    <div class="btWrap">
      <div class="btInner">
        
        <!-- 天气 -->
        <div class="weather-wrap">
          <div class="weather">
            <img src="../../assets/img/duoyun.png" class="dy">
              <div class="weather-info">
                <p class="tell">今天的保湿和防晒指数, 点我一下就告诉你</p>
                <p class="need">需要允许位置权限哦</p>
            </div>
          <img src="../../assets/img/jiantou.png" class="jt">
          </div>
        </div>

        <!-- 广告语 -->
        <div class="banner">
          <div>
            <img src="../../assets/img/tuceng6.png" class="tc6">
          </div>
          <div>
            <img src="../../assets/img/katong.png" class="kt">
          </div>
        </div>

        <!-- 金刚区 Grid宫格-->
        <van-grid :column-num="5" class="jin-gang" :border="false">
          <van-grid-item v-for="(item,index) in list" :key="index" :icon="item.pic" :text="item.title" />
        </van-grid>

        <!-- 推荐文章 -->
        <div class="artical">
          <!-- 图片 -->
           <img src="../../assets/img/tuceng2.png" class="tc2">
          <!-- 标题 -->
          <h3 class="van-multi-ellipsis--l2 artical-title">刷酸合集 | 不同肤质的刷酸攻略,手把手 教你正确刷酸!</h3>
          <!-- 描述 -->
          <p class="atc-descript">新手刷酸必看这篇~</p>
          <!-- 作者 -->
          <div class="artical-info">
            <div class="author">
              <img src="../../assets/img/tuceng3.png" class="aut-pic">
              <span class="aut-name">种草喵</span>
            </div>
            <div class="artical-bk">
              <p><van-icon name="good-job-o" /> <span>666</span></p>
              <p><van-icon name="comment-o" /> <span>999</span></p>
            </div>
          </div>
        </div>

        <!-- 推荐文章 -->
        <div class="artical">
          <!-- 图片 -->
           <img src="../../assets/img/tuceng2.png" class="tc2">
          <!-- 标题 -->
          <h3 class="van-multi-ellipsis--l2 artical-title">刷酸合集 | 不同肤质的刷酸攻略,手把手 教你正确刷酸!</h3>
          <!-- 描述 -->
          <p class="atc-descript">新手刷酸必看这篇~</p>
          <!-- 作者 -->
          <div class="artical-info">
            <div class="author">
              <img src="../../assets/img/tuceng3.png" class="aut-pic">
              <span class="aut-name">种草喵</span>
            </div>
            <div class="artical-bk">
              <p><van-icon name="good-job-o" /> <span>666</span></p>
              <p><van-icon name="comment-o" /> <span>999</span></p>
            </div>
          </div>
        </div>

        <!-- 左右滑动 -->
        <SlideX />
      <!--滚动内容结束 -->
      </div>
      <!-- 滚动外框 -->
    </div>
    <!-- 整个组件结束 -->
  </div>
</template>

<script>
import { reactive } from "vue";
import BetterScroll from 'better-scroll';
import SlideX from "../shouye/SlideX.vue";

let bs= null;
export default {
  setup() {
    let list = jinGang(); // 金刚区
    // 金刚区
    function jinGang() {
      const list = reactive([
        {
          pic:require('../../assets/img/chachanpin.png'),
          title: "查产品",
        },
        {
          pic:require('../../assets/img/hufubang.png'),
          title: "护肤榜",
        },
        {
          pic:require('../../assets/img/meizhuangbang.png'),
          title: "美妆榜",
        },
        {
          pic:require('../../assets/img/pinpaiku.png'),
          title: "品牌库",
        },
        {
          pic:require('../../assets/img/qingbaoju.png'),
          title: "福利情报局",
        }
      ]);
      return list;
    }

    // 吸顶
    const nameList = reactive(["全部","祛痘.痘印","美白.淡斑","黑头","舒缓.抗敏","抗衰","防晒","医美","护肤入门","种拔草","吃惑"]);

    return {
      // isshow,
      list,
      nameList,
    }
  },
  data() {
    return {
      value:"",
      active: 0,
    };
  },
  mounted() {
    bs = new BetterScroll('.btWrap', {
      scrollX: false,
      scrollY: true,
      click: true,
      mouseWheel: true,//开启鼠标滚轮
      disableMouse: false,//启用鼠标拖动
      disableTouch: false,//启用手指触摸
      pullUpLoad: true,
    });
    bs.on("pullingUp",() => {
      console.log(1111);
    });
  },
  components: {
    SlideX,
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

.home {
  width: 100%;
  position: relative;
  overflow: hidden;
}
// 头部
.van-row {
  .ceshi {
    width: 100%; //弹性盒中子元素不写高度 就会继承父元素的高度
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 24px;
      height: 24px;    
    }
    span {
      font-size: @M-font;
      font-weight: 600;
      line-height: 24px;
    }
  }

  .van-search {
    padding: 15px 0;
    .van-search__content {
      width: 170px;
      height: 28px;
    }
  }
  .qiandao {
    display: flex;
    justify-content: space-around;
    align-items: center;
    // background: red;
    .qd {
      width: 34px;
      height: 34px;
    }
    .ld {
      width: 20px;
      height: 24px;
    }
  }
}

// 吸顶
.van-tabs {
  position: fixed;
  top: 59px;
  z-index: 999;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  /deep/ .van-tabs__line {
    background-color: #64c8c8;
  }
}
// 天气
.weather-wrap {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.weather {
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: blue;
  padding: 0 10px;
  background: url("../../assets/img/juxing5.png");
  // margin: 10px 0;
  .dy {
    width: 46px;
    height: 40px;
  }
  .weather-info {
    p:first-child {
      color: #64c8c8;
      font-size: @SS-font;
      margin-top: 5px;
    }
    p:last-child {
      color: #b5b5b5;
      font-size: @SS-font;
      margin-top: 5px;
    }
  }
  .jt {
    width: 26px;
    height: 20px;
  }
}

// 广告语
.banner {
  width: 100%;
  padding: 15px 0 10px 15px;
  // background: pink;
  display: flex;
  justify-content: space-between;
  .tc6 {
    width: 224px;
    height: 128px;
  }
  .kt {
    width: 122px;
    height: 134px;
  }
}

// 金刚区 
// 利用深度选择器 修改vant组件默认样式
/deep/ .jin-gang {
  .van-grid-item__content {
    padding: 0;
    .van-icon__image {
      width: 70px;
      height:58px;
    }
  }
  .van-grid-item__text {
    color: #717171;
  }
  .van-grid-item__content:nth-last-child(5) {
   .van-icon__image {
      width: 70px;
      height:58px;
    }
  }
}

//文章推荐
.artical {
  padding: 15px;
  overflow:auto;
  border-bottom: 1px solid #ddd;
  // background: pink;
  .tc2 {
    margin-top: 10px;
    width: 344px;
    height: 150px;
  }
  .artical-title {
    font-size: 20px;
    font-weight: 500px;
    padding: 10px 15px 5px;
  }
  .atc-descript{
    padding-left: 15px;
    font-size: @SS-font;
    color: #515151;
    margin: 15 0;
  }
  .artical-info {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 作者信息
    .author {
      width: 150px;
      // background: red;
      display: flex;
      align-items: center;
      .aut-pic {
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }
      .aut-name {
        flex: 1;
        font-size: @SS-font;
        color: #515151;
        .hide ();
      }
    }
    // 点赞
    .artical-bk {
      width: 150px;
      // background: blue;
      color: #999;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // background: red;
      p {
        height: 28px;
        // background: blue;
        margin-right: 20px;
        .van-icon {
          font-size:20px;
        }
        span {
          height:28px;
          line-height: 28px;
          vertical-align: middle;
          font-size: @SS-font;
        }
      }
    }
  }
}
// 滚动betterScroll
.btWrap {
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 63px;
  // background: blueviolet;
  overflow: hidden;
}

// 左右滑动

</style>
